<template>
<div>
    <!-- 背景图 -->
    <img :src="musicList.al.picUrl" alt="" class="bgimg" >
    <!-- 上部分 -->
    <div class="detailTop">
        <div class="detailTopLeft">
            <van-icon name="arrow-left"  @click="backHome" class="arrow-left"/>
            <div class="leftMarquee">
                  <Vue3Marquee style=" color: #fff">{{musicList.al.name}}</Vue3Marquee>
                <span v-for="item in musicList.ar" :key="item">
                    {{item.name}}
                </span>
                <van-icon name="arrow"  class="arrow"/>
            </div>
        </div>
        <div class="detailTopRight">
         <van-icon name="share-o" class="share-o" />
        </div>
    </div>
    <!-- 播放中间部分 -->
    <div class="detailContent" v-show="!isLyricShow" >
        <img src="@/assets/img/needle-ab.png" alt="" class="img_needle" :class="{img_needle_active: !isbtnShow}">
        <img src="@/assets/img/cd.png" alt="" class="img_cd" >
        <img :src="musicList.al.picUrl" alt="" class="img_ar" @click="isLyricShow=true" :class="{img_ar_active: !isbtnShow, img_ar_paused:isbtnShow}" >
    </div>
    <!-- 歌词随着播放往下走 -->
    <div class="musicLyric" ref="musicLyric" v-show="isLyricShow">
        <p v-for="item in lyric" :key="item"
        :class="{
        active:
          currentTime * 1000 >= item.time && currentTime * 1000 < item.pre,
      }">
            {{item.lrc}}
        </p>
    </div>
    <!-- 下部分 -->
    <div class="detailFooter">
        <div class="footerTop">
            <van-icon name="like-o" />
            <van-icon name="down" />
            <van-icon name="music-o" />
            <van-icon name="chat-o" />
            <van-icon name="card" />
        </div> 
        <!-- 进度条 -->
        <div class="footerContent">
            <input type="range" class="range" min="0" :max="duration" v-model="currentTime" step="0.05">
        </div>

        <div class="footer">
            <van-icon name="revoke" />
            <!-- 上一首 -->
            <van-icon name="arrow-left" @click="goPlay(-1)"/>
            <van-icon name="play-circle-o" class="play-circle-o" @click="play" v-if="isbtnShow"/>
            <van-icon name="pause-circle" class="play-circle-o" @click="play" v-else/>
             <!-- 下一首 -->
            <van-icon name="arrow" @click="goPlay(1)"/>
            <van-icon name="ascending" />
        </div>
    </div>
</div>
</template>
<script>
// vue3跑马灯 导入
import { Vue3Marquee } from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'
import { mapMutations,mapState } from 'vuex'

export default {
    data(){
        return{
            isLyricShow:false
        }
    },
    //渲染完成 (生命周期函数)
    mounted(){
        this.addDuration();
    },
    computed:{
        ...mapState(['lyricList', 'currentTime', 'plaList', 'plaListIndex','duration']),
        //获取歌词
        lyric:function(){
            let arr;
            //判断获取到歌词去对数组进行操作
            if(this.lyricList.lyric){   
                //lyricList.lyric先进行分隔然后有一个数组 -> map 返回一个新的数组
                arr = this.lyricList.lyric.split(/[(\r\n)\r\n]+/).map((item,i)=>{
                    //切割歌词
                    let min = item.slice(1,3);//分
                    let sec = item.slice(4,6);//秒
                    let mill = item.slice(7,10); //毫秒
                    let lrc = item.slice(11,item.length); //切割歌词
                    
                    let time = parseInt(min)*60*1000 + parseInt(sec)*1000 + parseInt(mill);
                    //判断是不是数字如果不是就切割成数字
                    if(isNaN(Number(mill))){
                        mill = item.slice(7,9);
                        lrc = item.slice(10, item.length);
                        //重新赋值
                        time = parseInt(min)*60*1000 + parseInt(sec)*1000 + parseInt(mill);
                    }
                     return {min, sec, mill, lrc, time};
                })

                //判断歌词是否到最后一句歌词   
                arr.forEach((item, i) => {
                    if (i === arr.length - 1 || isNaN(arr[i + 1].time)) {
                        item.pre = 100000;
                    } else {
                        //下一句歌词的时间
                        item.pre = arr[i + 1].time;
                    }
                    });
            }
            //console.log(arr)
            //把数组返回出去
            return arr;
            
        }
    },
    components:{
        Vue3Marquee
    },
    mounted(){
        //console.log(this.musicList)
        //打印歌词
      // console.log(this.lyricList.lyric);

    },
    props:['musicList','play','isbtnShow','addDuration '],//父传子  子接收
    methods:{
        //歌词和磁盘切换显示
        backHome(){
            this.isLyricShow = false;
            this.updateDetailShow()
        },
        //切换上一首和下一首按钮
        goPlay(num){
            //拿到下标根据下标切换上下歌曲
            let index = this.plaListIndex + num;
            //判读如果是最后一首就会返回第一首重播
            if (index < 0) {
                index = this.plaList.length-1;
                //如果是
            } else if (index == this.plaList.length) {
                index = 0;
            }
            this.updatePlayListIndex(index)
        },
        ...mapMutations(['updateDetailShow', 'updatePlayListIndex'])
    },
    //监听歌词滚动的位置 
    watch:{
        currentTime(newValue){
            let p = document.querySelector('p.active');
            //console.log([p])
            //判断 播放 大于300 就向上滚动
           if(p){
             if(p.offsetTop > 300){
                this.$refs.musicLyric.scrollTop = p.offsetTop - 300
             }
           }           
           if(newValue === this.duration){
             //判断如果播放到最后一首歌，就返回到第一首播放
             if(this. plaListIndex === this.plaList.length - 1){
                this.updatePlayListIndex(0)
                //手动调用  重播，因为它是默认只有一首歌
                this.play()
             }else{
                //判断进度条播放完毕后就继续播放到下一首歌
                  this.updatePlayListIndex(this.plaListIndex + 1);
             }
           }
        }
    }
}
</script>

<style lang="less" scoped>
.bgimg{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    /** 虚化背景图 */
    filter: blur(70px);
}
.detailTop{
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    fill: #fff;
    padding:0  0.2rem ;
    .detailTopLeft{
        display: flex;
        align-items: center;
        .arrow-left{
            color: #fff;
            font-size: .5rem;
        }
        .leftMarquee{
            width:3rem;
            height: 100%;
            margin-left:0.4rem ;
            padding: .9rem 0;
            font-size: .2rem;
            span{
                color: rgb(40, 43, 38);
            }
            .arrow{
               color: #999
            }
        }
    }
    .detailTopRight{
        align-items: center;
        font-size: .6rem;
        color: #fff;
    }
}

// 歌曲中间部分
.detailContent{
    width: 100%;
    height: 9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .img_needle{
        width: 2rem;
        height: 3rem;
        position: absolute;
        left: 46%;
        transform-origin:  0 0;
        transform: rotate(-13deg);
        transition: all 2s;
    }
    .img_needle_active{
        width: 2rem;
        height: 3rem;
        position: absolute;
        left: 46%;
        transform-origin:  0 0;
        transform: rotate(5deg);
        transition: all 2s;
    }
    .img_cd{
        width: 5rem;
        height: 5rem;
        position: absolute;
        bottom: 2.3rem;
        z-index: -1;
    }
    .img_ar{
        width: 3.2rem;
        height: 3.2rem;
        border-radius: 50%;
        position: absolute;
        bottom: 3.14rem;
        //rotate_ar 名字， 10s 时间， linear 匀速， infinite无限循环 
        animation: rotate_ar 10s linear infinite;
        }
        .img_ar_active{
            //启动动画 running
            animation-play-state: running;
        }
        .img_ar_paused{
            //暂停动画 paused
            animation-play-state: paused;
        }
        @keyframes rotate_ar {
            0%{
                transform: rotateZ(0deg);
            }
            100%{
                transform: rotateZ(360deg);
        }
    }
}

/**
    歌词
*/ 
.musicLyric{
    width: 100%;
    height: 8rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0 1rem;
    margin-top:.4rem;
    overflow: scroll; //溢出滚动 scroll
    p{
        margin-bottom: .3rem;
        color: rgb(227, 227, 230);
        text-align: center;       
    }
    .active{
        color: rgb(243, 146, 194);
        font-size: .3rem;
        font-weight: 900;
    }
}
// 底部开始
.detailFooter{
    width: 100%;
    height: 3rem;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0.2rem;
    flex-direction: column;

    .footerTop ,.footer{
        width: 100%;
        height: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 .55rem; 
        font-size: .65rem;
        color: #fff;
    }
    .play-circle-o{
        font-size: 1.2rem;
    }
}

.footerContent .range{
    width: 100%;
    height: 0 .6rem;
}
</style>